<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="webjars/datatables-buttons/1.6.1/css/buttons.semanticui.css" rel="stylesheet">
    <link href="css/responsive.semanticui.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/buttons.semanticui.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/dataTables.responsive.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/responsive.semanticui.js"></script>
    <script src="js/main.js"></script>
    <title>Предложения</title>
</head>
<body>
<div class="ui container">
    <div th:insert="~{header :: header}"></div>
    <div class="ui segment">
        <table id="table" class="ui celled table responsive nowrap unstackable" width="100%">
            <thead>
            <tr>
                <th>id</th>
                <th>Заказ</th>
                <th>Описание</th>
                <th>Пользователь</th>
                <th>Питомец</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
    <div th:insert="~{footer :: footer}"></div>
</div>
<div id="addModal" class="ui modal">
    <div class="header">Добавить новый заказ</div>
    <div class="content">
        <div class="ui form">
            <div class="field">
                <label>Заголовок</label>
                <input id="titleAddInput" class="titleInput" type="text" name="title" placeholder="Введите заголовок">
            </div>
            <select id="animalSelect" class="ui fluid selection dropdown">
                <option value="">Выберите питомца</option>
                <option th:each="animal : ${animals}"
                        th:value="${animal.id}"
                        th:text="${animal.name}">
                    Питомец
                </option>
            </select>
            <div class="field">
                <label>Описание</label>
                <textarea id="description"></textarea>
            </div>
        </div>
    </div>
    <div class="actions">
        <button id="btnAdd" class="ui submit button">OK</button>
        <div class="ui cancel button">Отмена</div>
    </div>
</div>
<script>
    $(document).ready(function() {
        var table = $("#table").DataTable({
            "searching": false,
            ajax: {
                url: "order/",
                type: "GET",
                dataSrc: ""
            },
            columns: [
                {"data": "id"},
                {"data": "title"},
                {"data": "description"},
                {
                    "data": null,
                    render: function(data) {
                        return '<a href="/profile?id='+data.user.id+'">'+data.user.name+'</a>';
                    }
                },
                {
                    "data": null,
                    render: function(data) {
                        return '<a href="/pet?id='+data.animal.id+'">'+data.animal.name+'</a>';
                    }
                },
                {
                    "data": null,
                    render: function(data) {
                        if (data.user.login === "[[${user}]]") {
                            return '<button class="ui button" onClick=deleteOrder('+data.id+');>Удалить</button>';
                        } else {
                            return '<button class="ui button" onClick=acceptOrder('+data.id+');>Взять</button>';
                        }
                    }
                }
            ],
            columnDefs: [
                {"targets": [0], "visible": false, "searchable": false},
                {responsivePriority: 0, targets: 1},
                {responsivePriority: 2, targets: 3},
                {responsivePriority: 3, targets: 4},
                {responsivePriority: 1, targets: -1}
            ],
            lengthChange: false
        });
        new $.fn.dataTable.Buttons(table, [{
                text: '<i class="plus icon"></i>Добавить',
                action: function () {
                    $("#addModal").modal('show');
                }
            }
        ]);

        table.buttons().container()
            .appendTo($('div.eight.column:eq(0)', table.table().container()));
        
        $("#btnAdd").on("click", function () {
            var title = $("#titleAddInput").val();
            var description = $("#description").val();
            var animal = {"id": $("#animalSelect").val()};

            if (title !== "" && description !== "" && animal != null) {
                var data = {
                    "title": title,
                    "description": description,
                    "animal": animal
                };
                createEntity("order/", data, $("#table"));
                $("#addModal").modal('hide');
                $("#titleAddInput").val("");
                $("#description").val("");
                $("#animalSelect").dropdown('clear');
            }
        });
    });

    function acceptOrder(orderId) {
        var order = {"id": orderId};
        var data = {"order": order};
        createEntity("acceptedOrder", data, $("#table"));
    }

    function deleteOrder(orderId) {
        var url = "order/"+orderId;
        deleteEntity(url, $("#table"));
    }
</script>
</body>
</html>